<!DOCTYPE HTML>
<html   xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>3D旋转效果</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <script type="text/javascript" src="public/hammer.min.js"></script>
    <link rel="stylesheet" href="public/base.css"/>
</head>
<body>
<article id="m">
    <header id="h" >
		<div id="ad" >
			<ul id="adtabs">
				<li><img src="public/ad_1.jpg" alt="" /></li>
				<li><img src="public/ad_2.jpg" alt="" /></li>
				<li><img src="public/ad_3.jpg" alt="" /></li>
				<li><img src="public/ad_4.jpg" alt="" /></li>
			</ul>
		</div>
    </header>
    <section id="s" style="z-index: 10; ">
        <ul id="tabs">
            <li	>          		<span class="mask"></span>  <img src="public/cover_1.jpg" alt=""/> <a href="tab.html" onclick="" class="btn"></a></li>
            <li class='l1'>		<span class="mask"></span>	<img src="public/cover_2.jpg" alt=""/><a href="tab.html" onclick="" class="btn"></a></li>
            <li class='center'> <span class="mask"></span>  <img src="public/cover_3.jpg" alt=""/><a href="tab.html"  onclick=""class="btn"></a></li>
            <li class='r1'>    	<span class="mask"></span>	<img src="public/cover_4.jpg" alt=""/><a href="tab.html"  onclick="" class="btn"></a></li>
        </ul>
    </section>

</article>
<script type="text/javascript">
    window.onload=function(){
	
		var oS  = document.querySelector('#s') ,
			oTabs = document.querySelector('#tabs'),
			oH = document.querySelector('#h'),
			oAd = document.querySelector('#ad'),
			oAdTab = document.querySelector('#adtabs'),
			oHheight = parseInt(window.getComputedStyle(oH,null)['height']),
			oHwidth = parseInt(window.getComputedStyle(oH,null)['width']) ,
			oWidth = parseInt(window.getComputedStyle(oS,null)['width']) ,
			oHeight = parseInt(window.getComputedStyle(oS,null)['height']),
			aLi = oTabs.children ,
			aLi2 = oAdTab.children ,
			oConfig = {};
			
		setAllStyle();
		
        var aClass	=	[],
			ready	=	true,
			scrollWidth = oConfig.width ;
		var adTab = new AdTab();
			
			
        for(var i=0;i<aLi.length;i++){
            aClass[i]={cls:aLi[i].className};
        }

        var hammertime =Hammer(oTabs).on('swipeleft',function(e){
            if(ready==false)
            {
                return;
            }
            aClass.unshift(aClass.pop());
            tab();
			adTab.next();
        });
        var hammertime2 =Hammer(oTabs).on('swiperight',function(e){
            if(ready==false)
            {
                return;
            }
            aClass.push(aClass.shift());
            tab();
			adTab.prev();
        });

        function tab(){
		
            ready=false;
            for(var i =0; i<aLi.length;i++){

                aLi[i].className='';
                aLi[i].className=aClass[i].cls;
                aLi[i].onclick=aClass[i].fn;
                if(aClass[i].cls=='center')
                {
                    function fnEnd()
                    {
                        ready=true;

                        this.removeEventListener('webkitTransitionEnd', fnEnd, false);
                    }

                    aLi[i].addEventListener(
                            'webkitTransitionEnd', fnEnd, false
                    );
                }
            }
        }
							
		function setStyle(dom,opt){
			for(var i in opt){
				dom.style[i]=opt[i]+'px';
			}
		};
		
		document.addEventListener('touchmove',function(ev){ev.preventDefault()},false);
		
		function setAllStyle(){
			for(var i=0;i<aLi.length;i++){
			setStyle(aLi[i],{
				width:parseInt( (oWidth/6)*4),
				height:oHeight
			})
		}
		
		setStyle(oTabs,{
			left:  parseInt(oWidth/6)*1  
		});
		
		oConfig = {
			width:parseInt(oHwidth*0.5),
			height:parseInt(oHheight*0.38)
		};
		
		setStyle(oAd,{
			top:parseInt(oHheight*0.105),
			height:oConfig.height,
			width:oConfig.width,
			left:parseInt(oHwidth*0.248)
		});
		
		for(var i=0;i<aLi2.length;i++){
			setStyle(aLi2[i],{
				width:oConfig.width,
				height:oConfig.height
			})
		}
		oAdTab.innerHTML += oAdTab.innerHTML;
		setStyle(oAdTab,{
			height:aLi2.length*oConfig.height*2
		})
		}
		
		function AdTab(){
		
			this.now=0;
			this.length = 4;
			this.size = oConfig.height;
			
		}
		AdTab.prototype.next=function(){
		
			this.now++;
			
			if(this.now==this.length) this.now = 0;
			
			var n = (this.now)%this.length;
			
			this.toTab(n);
			
		}
		AdTab.prototype.prev=function(){
		
			this.now--;
			if(this.now==-1) this.now = this.length-1;
			var n = (this.now)%this.length;
			this.toTab(n);	
		
		}
		AdTab.prototype.toTab=function(n){
				
			oAdTab.style.WebkitTransform='translateY(-'+(n*this.size)+'px)';
			
		}
	}

</script>

</body>

</html>